// pages/Dashboard/DashboardPage.jsx
import {
  CancelSubscription,
  CreateCustomerPortalSession,
  RemoveCreditCard,
  SetDefaultCreditCard,
} from "api/mutations";
import { Customer, CustomerCards, CustomerInvoices, Plans } from "api/queries";
import Loader from "components/atoms/Loader";
import { ENABLE_CUSTOMER_PORTAL } from "config";
import { formatMoney, hasFailedPayment, isFreeTrial } from "libs/utils";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { useAuth } from 'contexts/AuthContext';
import TrialComponent from "./TrialComponent";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Grid,
  Typography,
  Box,
  Slide,
  IconButton,
  Paper
} from '@mui/material';
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';

// Import our new reusable components
import UserInfo from 'components/molecules/UserInfo';
import SubscriptionInfo from 'components/molecules/SubscriptionInfo';
import PaymentMethods from 'components/molecules/PaymentMethods';
import PaymentHistory from 'components/molecules/PaymentHistory';
import QueryDebugLogger from 'components/debugging/QueryDebugLogger';

// Import our styles
import { sectionButtonSx, backButtonSx, backButtonContainerSx, paperSx } from './DashboardStyles';

const DashboardPage = () => {
  const { user } = useAuth();
  const { t } = useTranslation();
  const [currentSubscription, setCurrentSubscription] = useState({});
  const [selectedPlan, setSelectedPlan] = useState(null);
  const [confirmDialog, setConfirmDialog] = useState({ open: false, type: null, data: null });
  const [activeSection, setActiveSection] = useState(null); // null = main menu, 'userInfo', 'paymentHistory', 'paymentMethods'
  const queryClient = useQueryClient();
  
  // For debugging purposes - add data dependency tracking
  const [debugInfo, setDebugInfo] = useState({
    planSet: false,
    subscriptionSet: false
  });

  // Mutations remain unchanged
  const cancelSubscriptionMutate = useMutation(CancelSubscription, {
    onSuccess: () => {
      queryClient.invalidateQueries(["Customer", user.accountId]);
      queryClient.invalidateQueries(["CustomerInvoices", user.accountId]);
    },
  });

  const removeCardMutate = useMutation(RemoveCreditCard, {
    onSuccess: () => {
      queryClient.invalidateQueries(["CustomerCards", user.accountId]);
    },
  });

  const setDefaultCardMutate = useMutation(SetDefaultCreditCard, {
    onSuccess: () => {
      queryClient.invalidateQueries(["Customer", user.accountId]);
    },
  });

  const customerPortalSessionMutate = useMutation(CreateCustomerPortalSession, {});

  // Queries with debug tracking
  const plansQuery = useQuery("Plans", Plans, {
    retry: false,
  });
  
  const customerQuery = useQuery(["Customer", user.accountId], Customer, {
    retry: false,
    onSuccess: (data) => {
      if (!isFreeTrial(user.account)) {
        const cs = data.data.subscriptions.data[0];
        if (cs) {
          setCurrentSubscription(cs);
          setDebugInfo(prev => ({ ...prev, subscriptionSet: true }));
          
          if (plansQuery.data && plansQuery.data.data && plansQuery.data.data.plans) {
            const sp = plansQuery.data.data.plans.filter((p) => p.id === cs.plan.id)[0];
            setSelectedPlan(sp || null);
            setDebugInfo(prev => ({ ...prev, planSet: sp ? true : false }));
          }
        } else {
          // window.location.href = "/plan";
          // For debugging, don't redirect yet
          console.log("No subscription found, would redirect to /plan");
        }
      }
    },
  });

  const cardsQuery = useQuery(
    ["CustomerCards", user.accountId],
    CustomerCards,
    { retry: false }
  );

  const invoicesQuery = useQuery(
    ["CustomerInvoices", user.accountId],
    CustomerInvoices,
    { retry: false }
  );

  // Effect to detect when plans data is available but wasn't set in customer query
  useEffect(() => {
    if (
      customerQuery.data && 
      !isFreeTrial(user.account) && 
      !selectedPlan && 
      plansQuery.data && 
      plansQuery.data.data && 
      plansQuery.data.data.plans
    ) {
      const cs = customerQuery.data.data.subscriptions.data[0];
      if (cs) {
        const sp = plansQuery.data.data.plans.filter((p) => p.id === cs.plan.id)[0];
        if (sp) {
          setSelectedPlan(sp);
          setDebugInfo(prev => ({ ...prev, planSet: true }));
        }
      }
    }
  }, [plansQuery.data, customerQuery.data, user, selectedPlan]);

  // Handlers remain unchanged
  const handleConfirmAction = () => {
    const { type, data } = confirmDialog;
    switch (type) {
      case 'cancelSubscription':
        cancelSubscriptionMutate.mutate({ subscriptionId: data });
        break;
      case 'removeCard':
        removeCardMutate.mutate({ cardId: data });
        break;
      case 'setDefaultCard':
        setDefaultCardMutate.mutate({ cardId: data });
        break;
      default:
        console.log(`Unknown confirmDialog type: ${type}`);
    }
    setConfirmDialog({ open: false, type: null, data: null });
  };

  const redirectToCustomerPortalSession = async () => {
    const response = await customerPortalSessionMutate.mutateAsync();
    window.location.href = response.data.redirect_url;
  };

  const handleCancelSubscription = (subscriptionId) => {
    if (ENABLE_CUSTOMER_PORTAL) {
      return redirectToCustomerPortalSession();
    }
    setConfirmDialog({
      open: true,
      type: 'cancelSubscription',
      data: subscriptionId,
      title: t("dashboardPage.unsubscribe"),
      message: t("dashboardPage.areYouSureToUnsubscribe")
    });
  };

  const removeCard = (cardId) => {
    setConfirmDialog({
      open: true,
      type: 'removeCard',
      data: cardId,
      title: t("dashboardPage.removeCard"),
      message: t("dashboardPage.areYouSureToRemoveCard")
    });
  };

  const setDefaultCard = (cardId) => {
    setConfirmDialog({
      open: true,
      type: 'setDefaultCard',
      data: cardId,
      title: t("dashboardPage.makeDefault"),
      message: t("dashboardPage.areYouSureMakeDefault")
    });
  };

  // Navigation handlers
  const handleSectionClick = (section) => {
    setActiveSection(section);
  };

  const handleBackClick = () => {
    setActiveSection(null);
  };

  // Check if we have all the required data
  const isDataLoading = customerQuery.isLoading || plansQuery.isLoading || cardsQuery.isLoading || invoicesQuery.isLoading;
  
  // Check if the selected plan is properly loaded for non-trial users
  const isPlanDataReady = isFreeTrial(user.account) || (selectedPlan !== null);

  const renderConfirmDialog = () => (
    <Dialog
      open={confirmDialog.open}
      onClose={() => setConfirmDialog({ open: false, type: null, data: null })}
    >
      <DialogTitle>{confirmDialog.title}</DialogTitle>
      <DialogContent>
        <Typography>{confirmDialog.message}</Typography>
      </DialogContent>
      <DialogActions>
        <Button onClick={() => setConfirmDialog({ open: false, type: null, data: null })}>
          {t("dashboardPage.no")}
        </Button>
        <Button onClick={handleConfirmAction}>
          {t("dashboardPage.yes")}
        </Button>
      </DialogActions>
    </Dialog>
  );

  // Handle payment update function for UserInfo component
  const handleUpdatePayment = () => {
    if (ENABLE_CUSTOMER_PORTAL) {
      redirectToCustomerPortalSession();
    } else {
      window.location.href = "/card/add";
    }
  };

  // Prepare queries for the debug logger
  const queriesForDebug = [
    {
      name: "Plans Query",
      isLoading: plansQuery.isLoading,
      isError: plansQuery.isError,
      error: plansQuery.error,
      data: plansQuery.data
    },
    {
      name: "Customer Query",
      isLoading: customerQuery.isLoading,
      isError: customerQuery.isError,
      error: customerQuery.error,
      data: customerQuery.data
    },
    {
      name: "Cards Query",
      isLoading: cardsQuery.isLoading,
      isError: cardsQuery.isError,
      error: cardsQuery.error,
      data: cardsQuery.data
    },
    {
      name: "Invoices Query",
      isLoading: invoicesQuery.isLoading,
      isError: invoicesQuery.isError,
      error: invoicesQuery.error,
      data: invoicesQuery.data
    },
    {
      name: "State Variables",
      isLoading: false,
      isError: false,
      data: {
        selectedPlan,
        currentSubscription,
        debugInfo,
        isFreeTrial: isFreeTrial(user.account),
        user
      }
    }
  ];

  // Render main menu with section buttons
  const renderMainMenu = () => (
    <Box 
      sx={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center',
        minHeight: '60vh',
        padding: 2
      }}
    >
      <Paper {...paperSx}>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 3,
            padding: 4
          }}
        >
          <Typography variant="h4" gutterBottom sx={{ color: '#f0f6fc', marginBottom: 2 }}>
            Dashboard
          </Typography>
          
          <Button
            sx={sectionButtonSx}
            onClick={() => handleSectionClick('userInfo')}
          >
            User Information
          </Button>
          
          <Button
            sx={sectionButtonSx}
            onClick={() => handleSectionClick('paymentHistory')}
          >
            Payment History
          </Button>
          
          <Button
            sx={sectionButtonSx}
            onClick={() => handleSectionClick('paymentMethods')}
          >
            Payment Methods
          </Button>
        </Box>
      </Paper>
    </Box>
  );

  // Render active section content
  const renderSectionContent = () => {
    const backButton = (
      <Box sx={backButtonContainerSx}>
        <IconButton 
          onClick={handleBackClick}
          size="large"
          sx={backButtonSx}
        >
          <KeyboardBackspaceIcon />
        </IconButton>
      </Box>
    );

    switch (activeSection) {
      case 'userInfo':
        return (
          <Grid container spacing={3}>
            <Grid item xs={12}>
              {backButton}
              <UserInfo 
                user={user} 
                subscription={currentSubscription}
                hasFailedPayment={hasFailedPayment}
                onUpdatePayment={handleUpdatePayment}
                defaultViewMode="table"
              />
              
              {/* Only render SubscriptionInfo when selectedPlan is available */}
              {selectedPlan ? (
                <Box mt={3}>
                  <SubscriptionInfo 
                    plan={selectedPlan}
                    subscription={currentSubscription}
                    onCancelSubscription={handleCancelSubscription}
                    formatMoney={formatMoney}
                    defaultViewMode="table"
                  />
                </Box>
              ) : (
                <Box mt={3} p={3} border={1} borderColor="warning.main" borderRadius={1}>
                  <Typography variant="h6" color="warning.main">
                    Plan Data Not Available
                  </Typography>
                  <Typography variant="body2">
                    Plan data could not be loaded. This might be due to:
                  </Typography>
                  <ul>
                    <li>Plans API request failed</li>
                    <li>Customer has no active subscription</li>
                    <li>Plan ID in subscription doesn't match available plans</li>
                  </ul>
                </Box>
              )}
            </Grid>
          </Grid>
        );
        
      case 'paymentHistory':
        return (
          <Grid container spacing={3}>
            <Grid item xs={12}>
              {backButton}
              <PaymentHistory 
                invoicesData={invoicesQuery.data?.data || []}
                currency={selectedPlan?.currency}
                formatMoney={formatMoney}
                defaultViewMode="table"
              />
            </Grid>
          </Grid>
        );
        
      case 'paymentMethods':
        return (
          <Grid container spacing={3}>
            <Grid item xs={12}>
              {backButton}
              <PaymentMethods 
                cardsData={cardsQuery.data?.data || []}
                customerData={customerQuery.data?.data}
                enableCustomerPortal={ENABLE_CUSTOMER_PORTAL}
                onRemoveCard={removeCard}
                onSetDefaultCard={setDefaultCard}
                formatMoney={formatMoney}
                currency={selectedPlan?.currency}
                defaultViewMode="table"
              />
            </Grid>
          </Grid>
        );
        
      default:
        return null;
    }
  };

  return (
    <>
      {isDataLoading ? (
        <Box display="flex" justifyContent="center" alignItems="center" minHeight="50vh">
          <Loader />
        </Box>
      ) : (
        <>
          {isFreeTrial(user.account) ? (
            <TrialComponent user={user} />
          ) : (
            <Box position="relative" minHeight="60vh">
              {/* Main Menu Slide */}
              <Slide direction="right" in={activeSection === null} mountOnEnter unmountOnExit>
                <Box>
                  {renderMainMenu()}
                </Box>
              </Slide>
              
              {/* Section Content Slide */}
              <Slide direction="left" in={activeSection !== null} mountOnEnter unmountOnExit>
                <Box>
                  {renderSectionContent()}
                </Box>
              </Slide>
              
              {renderConfirmDialog()}
            </Box>
          )}
        </>
      )}
      
      {/* Debug Logger */}
      <QueryDebugLogger queries={queriesForDebug} />
    </>
  );
};

export default DashboardPage;